<template>
  <!--  如果包含忽略字段，则使用默认插槽-->
  <div v-if="ignoreFields.includes(item.field)">
    <slot :data="item" :index="index"/>
  </div>
  <!--  如果是text类型-->
  <el-input v-else-if="item.formType == 'text'"
            v-model="fieldFrom[item.field]"
            :disabled="item.disabled || disabled"
            :maxlength="100"
            :placeholder="item.placeholder"
            :type="item.formType"
            @input="commonChange(item, index, $event)"/>
  <!--  如果是floatnumber且禁用、mobile、email、website类型-->
  <el-input v-else-if="hookMixin.isTrimInput(item.formType, item.disabled || disabled)"
            v-model.trim="fieldFrom[item.field]"
            :disabled="item.disabled || disabled"
            :maxlength="hookMixin.getInputMaxlength(item.formType)"
            :placeholder="item.placeholder"
            type="text"
            @input="commonChange(item, index, $event)"/>
  <!--  如果是number类型-->
  <el-input-number v-else-if="item.formType == 'number'"
                   v-model="fieldFrom[item.field]"
                   :placeholder="item.placeholder"
                   :disabled="item.disabled || disabled"
                   :controls="false"
                   @change="commonChange(item, index, $event)"/>
  <!--  如果是floatnumber类型-->
  <el-input-number v-else-if="item.formType == 'floatnumber'"
                   v-model="fieldFrom[item.field]"
                   :placeholder="item.placeholder"
                   :disabled="item.disabled || disabled"
                   :controls="false"
                   @change="commonChange(item, index, $event)"/>
  <!--  如果是percent类型-->
  <WkPercentInput v-else-if="item.formType == 'percent'"
                  v-model:value="fieldFrom[item.field]"
                  :placeholder="item.placeholder"
                  :disabled="item.disabled || disabled"
                  :controls="false"
                  @change="commonChange(item, index, $event)"/>
  <!--  如果是textarea类型-->
  <el-input v-else-if="item.formType == 'textarea'"
            v-model="fieldFrom[item.field]"
            :disabled="item.disabled || disabled"
            :rows="3"
            :autosize="{ minRows: 3}"
            :maxlength="item.maxlength || 800"
            :placeholder="item.placeholder"
            :type="item.formType"
            resize="none"
            @input="commonChange(item, index, $event)"/>
  <!--  如果是select类型-->
  <WkSelect v-else-if="['select'].includes(item.formType)"
            v-model:value="fieldFrom[item.field]"
            :disabled="item.disabled || disabled"
            :clearable="item.clearable"
            :placeholder="item.placeholder"
            :options="item.setting"
            :show-type="item.precisions === 1 ? 'tiled' : 'default'"
            :other-show-input="item.hasOwnProperty('optionsData')"
            @change="commonChange(item, index, $event)"/>
  <!--  如果是checkbox类型-->
  <WkCheckbox v-else-if="['checkbox'].includes(item.formType)"
              v-model:value="fieldFrom[item.field]"
              :disabled="item.disabled || disabled"
              :clearable="item.clearable"
              :placeholder="item.placeholder"
              :options="item.setting"
              :show-type="item.precisions === 1 ? 'tiled' : 'default'"
              :other-show-input="item.hasOwnProperty('optionsData')"
              @change="commonChange(item, index, $event)"/>
  <!-- <el-select
        v-else-if="['checkbox', 'select'].includes(item.formType)"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled || disabled"
        :clearable="item.clearable"
        :placeholder="item.placeholder"
        :multiple="item.formType === 'checkbox'"
        style="width: 100%;"
        @change="commonChange(item, index, $event)">
        <el-option
          v-for="(item, index) in item.setting"
          :key="index"
          :label="!isEmptyValue(item.value) ? item.label || item.name : item "
          :value="!isEmptyValue(item.value) ? item.value : item"/>
      </el-select> -->
  <!-- <el-select
        v-else-if="item.formType == 'checkbox'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled || disabled"
        :clearable="item.clearable"
        :placeholder="item.placeholder"
        multiple
        style="width: 100%;"
        @change="commonChange(item, index, $event)">
        <el-option
          v-for="(item, index) in item.setting"
          :key="index"
          :label="!isEmptyValue(item.value) ? item.label || item.name : item "
          :value="!isEmptyValue(item.value) ? item.value : item"/>
      </el-select> -->
  <!--  如果是date类型-->
  <el-date-picker v-else-if="item.formType == 'date'"
                  v-model="fieldFrom[item.field]"
                  :disabled="item.disabled || disabled"
                  clearable
                  style="width: 100%;"
                  type="date"
                  value-format="YYYY.MM.DD"
                  placeholder="选择日期"
                  @change="commonChange(item, index, $event)"/>
  <!--  如果是dateRange类型-->
  <el-date-picker v-else-if="item.formType == 'dateRange'"
                  v-model="fieldFrom[item.field]"
                  :disabled="item.disabled || disabled"
                  :type="item.dateType || 'daterange'"
                  :value-format="item.dateValueFormat || 'YYYY.MM.DD'"
                  clearable
                  style="width: 100%;vertical-align: middle;"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="commonChange(item, index, $event)"/>
  <!--  如果是datetime类型-->
  <el-date-picker v-else-if="item.formType == 'datetime'"
                  v-model="fieldFrom[item.field]"
                  :disabled="item.disabled || disabled"
                  clearable
                  ref="datetime"
                  style="width: 100%;"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  @focus="hookMixin.dateTimeFocus"
                  placeholder="选择日期"
                  @change="commonChange(item, index, $event)"/>
  <!--  如果是structure类型-->
  <WkDepSelect v-else-if="item.formType == 'structure'"
               v-model:value="fieldFrom[item.field]"
               :request="item.request"
               :props="item.props"
               :params="item.params"
               :disabled="item.disabled || disabled"
               :radio="!hookMixin.isEmptyValue(item.radio) ? item.radio : true"
               style="width: 100%;"
               @change="depOrUserChange(item, index, arguments[0], arguments[1])"/>
  <!--  如果是single_user、user类型-->
  <WkUserSelect v-else-if="['single_user', 'user'].includes(item.formType)"
                v-model:value="fieldFrom[item.field]"
                :request="item.request"
                :props="item.props"
                :params="item.params"
                :disabled="item.disabled || disabled"
                :radio="!hookMixin.isEmptyValue(item.radio) ? item.radio : true"
                style="width: 100%;"
                @change="depOrUserChange(item, index, arguments[0], arguments[1])"/>
  <!--  如果是radio类型-->
  <el-radio-group v-else-if="item.formType == 'radio'"
                  v-model="fieldFrom[item.field]"
                  :disabled="item.disabled || disabled"
                  :placeholder="item.placeholder"
                  @change="commonChange(item, index, $event)">
    <el-radio v-for="(item, index) in item.setting" :key="index"
              :label="!hookMixin.isEmptyValue(item.value) ? item.value : item">
      {{ !hookMixin.isEmptyValue(item.value) ? item.label || item.name : item }}
    </el-radio>
  </el-radio-group>
  <!--  如果是boolean_value类型-->
  <el-switch v-else-if="item.formType == 'boolean_value'"
             v-model="fieldFrom[item.field]"
             :disabled="item.disabled || disabled"
             active-value="1"
             inactive-value="0"
             @change="commonChange(item, index, $event)"/>
  <!--  如果是position类型-->
  <WkPosition v-else-if="item.formType == 'position'"
              :hide-area="item.hideArea"
              :only-province="item.onlyProvince"
              :show-detail="item.showDetail"
              v-model:value="fieldFrom[item.field]"
              :disabled="item.disabled || disabled"
              @change="commonChange(item, index, $event)"/>
  <!--  如果是location类型-->
  <WkLocation v-else-if="item.formType == 'location'"
              v-model:value="fieldFrom[item.field]"
              :disabled="item.disabled || disabled"
              @change="commonChange(item, index, $event)"/>
  <!--  如果是handwriting_sign类型-->
  <WkSignaturePad v-else-if="item.formType == 'handwriting_sign'"
                  v-model:value="fieldFrom[item.field]"
                  :disabled="item.disabled || disabled"/>
  <!--  如果是desc_text类型-->
  <WkDescText v-else-if="item.formType == 'desc_text'"
              :value="fieldFrom[item.field]"/>
  <!--  如果是date_interval类型-->
  <el-date-picker v-else-if="item.formType === 'date_interval'"
                  v-model="fieldFrom[item.field]"
                  :type="item.dateType || 'daterange'"
                  :value-format="item.dateValueFormat || 'YYYY.MM.DD'"
                  :disabled="item.disabled || disabled"
                  style="width: 100%;vertical-align: middle;"
                  clearable
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="commonChange(item, index, $event)"/>
  <!--  如果是address类型-->
  <v-distpicker v-else-if="item.formType == 'address'"
                :province="fieldFrom[item.field].province"
                :city="fieldFrom[item.field].city"
                :area="fieldFrom[item.field].area"
                @province="hookMixin.selectProvince($event, item, index)"
                @city="hookMixin.selectCity($event, item, index)"
                @area="hookMixin.selectArea($event, item, index)"/>
  <!--  如果是file类型-->
  <XhFiles v-else-if="item.formType == 'file'"
           :value="fieldFrom[item.field]"
           :disabled="item.disabled || disabled"
           @value-change="oldChange($event, item, index)"/>
  <!--  如果是detail_table类型-->
  <WkDetailTable v-else-if="item.formType == 'detail_table'"
                 :show-type="item.precisions === 2 ? 'table' : 'default'"
                 :title="item.name"
                 :prop-prefix="item.field"
                 :btn-name="item.remark"
                 :add-field-list="item.fieldExtendList"
                 :add-field-form="item.fieldForm"
                 :field-form="fieldFrom[item.field]"
                 :field-list="item.fieldList"
                 :disabled="item.disabled || disabled"/>
  <div v-else>
    <slot :data="item" :index="index"/>
  </div>
</template>

<script setup>
import WkUserSelect from '/src/szcomponent/NewCom/SzDeptUserComp/WkUserSelect/index.vue'
import WkDepSelect from '/src/szcomponent/NewCom/SzDeptUserComp/WkDepSelect/index.vue'
import WkPosition from '/src/components/NewCom/WkPosition/index.vue'
import WkLocation from '/src/szcomponent/NewCom/szLocationComp/WkLocation/index.vue'
import WkSignaturePad from '/src/components/NewCom/WkSignaturePad/index.vue'
import WkDescText from '/src/components/NewCom/WkDescText/index.vue'
import WkPercentInput from '/src/components/NewCom/WkPercentInput/index.vue'
import WkSelect from '/src/components/NewCom/WkSelect/index.vue'
import WkCheckbox from '/src/components/NewCom/WkCheckbox/index.vue'
import WkDetailTable from '/src/components/NewCom/WkDetailTable/index.vue'
import VDistpicker from '/src/szcomponent/VDistpicker/index.js'
import {XhFiles} from '/src/components/CreateCom/index.js'
import {useHookMixin} from './HookMixin.js'

defineOptions({
  // 字段
  name: 'WkField',
})

const hookMixin = useHookMixin()

const emits = defineEmits(['change'])

/**
 * 常规组件change事件
 */
function commonChange(item, index, value) {
  console.log("fieldFrom", item, index, value)
  console.log("fieldFrom", props.fieldFrom)
  console.log("fieldFrom", props.fieldFrom[item.field])

  emits('change', item, index, value)
}

/**
 * 旧change回调
 */
function oldChange(dataValue, field, index) {
  props.fieldFrom[field.field] = dataValue.value
  emits('change', field, index, dataValue.value)
  // todo whf 这里好像不行
  if (cxt.refs.form) {
    cxt.refs.form.validateField(field.field)
  }
}

/**
 * 部门事件
 */
function depOrUserChange(item, index, value, valueList) {
  emits('change', item, index, value, valueList)
}

function addressChange(item, index, value) {
  emits('change', item, index, value)
}

const props = defineProps({
  item: Object,
  index: Number,
  fieldFrom: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 忽略的字段直接输出
  ignoreFields: {
    type: Array,
    default: () => {
      return []
    }
  },
  disabled: Boolean
})
</script>

<style lang="scss" scoped>
.el-input-number {
  width: 100%;

  :deep(.el-input__inner ) {
    text-align: left;
    padding: 0 8px;
  }
}
</style>
